<template>
  <div class="home-gird-box">
    <left-block :activeColor="color"></left-block>
    <home-gird-right></home-gird-right>
  </div>
</template>

<script>
import allImgPreloader from "../../../utils/imgPreLoad";
import HomeGirdRight from "./HomeGirdRight.vue";
export default {
  name: "FirstPage",
  components: {
    HomeGirdRight,
  },
  mounted() {
    // 进入第一个页面前将左侧边栏的值置为false,让其按照prop的值进行显示
    this.$store.commit("ruler/colorChange", false);
    // 预加载图片
    const imgList = [
      "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg_new.jpg",
      "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg1_new.jpg",
      "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg2_new.jpg",
      "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg3_new.jpg",
    ];
    allImgPreloader(imgList);
  },
  data() {
    return {
      color: "rgba(172,37,43,0.9)",
    };
  },
};
</script>

<style lang="less" scoped>
.home-gird-box {
  width: 100%;
  height: 100vh;
  display: flex;
  .bg-maker();
  background-image: url("https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg_new.jpg");
}
@media screen and (max-width: 480px) {
  .home-gird-box {
    flex-direction: column;
  }
}
</style>
